<template >


  <el-select v-model="Search_Select" placeholder="请选择" slot="prepend" >
    <el-option label="公司名称" value="enterprise_name"></el-option>
    <el-option label="所属行业" value="industry"></el-option>
    <el-option label="单位地址" value="enterprise_address"></el-option>
  </el-select>
  <el-input  placeholder="请输入关键字" icon="search"  class="search"  v-model="Search_Input" style="width:200px"></el-input>
  <el-button type="primary" style="width: 80px;margin-bottom: 20px;" @click="search_do">搜索</el-button>

  <el-table
    :data="showCrud"
    style="width: 100%;font-family: arial,verdana,helvetica,'PingFang SC','HanHei SC',STHeitiSC-Light,Microsoft Yahei,sans-serif;"
    class="job-table-style"
  >

    <el-table-column
      label="公司名称"
      prop="enterprise_name"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.enterprise_name }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="单位地址"
      prop="enterprise_address"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.enterprise_address }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="单位网址"
      prop="enterprise_website"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.enterprise_website }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="所属行业"
      prop="industry"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.industry }}</span>
      </template>
    </el-table-column>



    <el-table-column
      label="注册资金"
      prop="register_capital"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.register_capital }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="公司简介"
      prop="enterprise_introduction"
      width="280">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.enterprise_introduction }}</span>
      </template>
    </el-table-column>

<!--    <el-table-column-->
<!--      label="审核状态"-->
<!--      prop="enterprise_infor_examine"-->
<!--      width="180">-->
<!--      <template #default="scope">-->
<!--        <span style="margin-left: 10px">{{ scope.row.enterprise_infor_examine }}</span>-->
<!--      </template>-->
<!--    </el-table-column>-->

    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="mini"
          @click="handleEditCom(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDeleteCom(scope.$index, scope.row)">删除</el-button>
<!--        <el-button-->
<!--          size="mini"-->
<!--          type="primary"-->
<!--          @click="handleExamineCom(scope.$index, scope.row)">审核</el-button>-->
      </template>
    </el-table-column>
  </el-table>

  <!--    表格数据过多时,采用的分页-->
  <el-pagination
    background
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-size="Page_Size"
    layout="prev, pager, next"
    :total="Page_Total"
    style="padding-top: 20px;padding-left: 1200px;">
  </el-pagination>

<!--  <el-button type="primary" style="float: left;width: 80px;margin-top: 10px;" @click="handleAddCom()">添加</el-button>-->


  <!--  添加，弹框-->

<!--  <el-dialog title="公司信息" v-model="addDialogFormVisible" >-->
<!--    <el-form :model="com_form" ref="com_form">-->
<!--      <el-form-item label="公司名称" prop="enterprise_name">-->
<!--        <el-input v-model="com_form.enterprise_name"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="单位地址" prop="enterprise_address">-->
<!--        <el-input v-model="com_form.enterprise_address"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="所属行业" prop="industry">-->
<!--        <el-input v-model="com_form.industry"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="联系人" prop="enterprise_contacts">-->
<!--        <el-input v-model="com_form.enterprise_contacts"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="单位网址" prop="enterprise_website">-->
<!--        <el-input  v-model="com_form.enterprise_website"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="机构码" prop="organ_code">-->
<!--        <el-input v-model="com_form.organ_code"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="公司邮编" prop="enterprise_postcode">-->
<!--        <el-input v-model="com_form.enterprise_postcode"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="公司性质" prop="enterprise_nature">-->
<!--        <el-input v-model="com_form.enterprise_nature"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="传真" prop="enterprise_fax">-->
<!--        <el-input v-model="com_form.enterprise_fax"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="注册资金" prop="register_capital">-->
<!--        <el-input v-model="com_form.register_capital"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="公司简介" prop="enterprise_introduction">-->
<!--        <el-input v-model="com_form.enterprise_introduction"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="公司信息审核" prop="enterprise_infor_examine">-->
<!--        <el-input v-model="com_form.enterprise_infor_examine"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button @click="addDialogFormVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="addHandleCom('com_form',com_form)">确定添加</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--  </el-dialog>-->


  <!--  编辑，弹框-->

  <el-dialog title="公司信息" v-model="editDialogFormVisible" >
    <el-form :model="com_edit_form" ref="com_edit_form" :rules="editRule">
      <el-form-item label="公司名称" prop="enterprise_name">
        <el-input v-model="com_edit_form.enterprise_name"></el-input>
      </el-form-item>
      <el-form-item label="单位地址" prop="enterprise_address">
        <el-input v-model="com_edit_form.enterprise_address"></el-input>
      </el-form-item>
      <el-form-item label="所属行业" prop="industry">
        <el-input v-model="com_edit_form.industry"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="enterprise_contacts">
        <el-input v-model="com_edit_form.enterprise_contacts"></el-input>
      </el-form-item>
      <el-form-item label="单位网址" prop="enterprise_website">
        <el-input  v-model="com_edit_form.enterprise_website"></el-input>
      </el-form-item>
      <el-form-item label="机构码" prop="organ_code">
        <el-input v-model="com_edit_form.organ_code"></el-input>
      </el-form-item>
      <el-form-item label="公司邮编" prop="enterprise_postcode">
        <el-input v-model="com_edit_form.enterprise_postcode"></el-input>
      </el-form-item>
      <el-form-item label="公司性质" prop="enterprise_nature">
        <el-input v-model="com_edit_form.enterprise_nature"></el-input>
      </el-form-item>
      <el-form-item label="传真" prop="enterprise_fax">
        <el-input v-model="com_edit_form.enterprise_fax"></el-input>
      </el-form-item>
      <el-form-item label="注册资金" prop="register_capital">
        <el-input v-model="com_edit_form.register_capital"></el-input>
      </el-form-item>
      <el-form-item label="公司简介" prop="enterprise_introduction">
        <el-input v-model="com_edit_form.enterprise_introduction"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancelEdit()">取消</el-button>
        <el-button type="primary" @click="editHandleCom('com_edit_form',com_edit_form)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--  审核弹框-->
  <el-dialog title="请选择审核状态" v-model="examineDialogFormVisible" >
    <el-form :model="com_form" ref="com_form">
      <el-form-item label="公司信息审核" prop="enterprise_infor_examine">
        <el-radio v-model="com_form.enterprise_infor_examine" label="待审核">审核不通过</el-radio>
        <el-radio v-model="com_form.enterprise_infor_examine" label="已审核">审核通过</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button @click="examineDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="examineHandleCom('com_form',com_form)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name:"comTable",
  data() {
    return {
      editRule:{
        enterprise_name:[
          { required: true, message: "请输入职位名称",
            trigger: "blur"
          },
        ]
      },
      com_edit_form:{},

      crud:[],
      com_form:{},  //公司临时数据
      addDialogFormVisible:false,
      editDialogFormVisible:false,
      examineDialogFormVisible:false,
      Search_Input:"",
      Search_Select:"",


      //分页数据
      Page_Size: 7,
      currentPage: 1,
      Page_Total: 3,
      showCrud:[],
    }
  },
  methods: {
    findAll(){
      let _this=this
      axios.get('http://120.79.211.12:8080/Get_Enterprise_infor')
        .then (function (response) {
          _this.crud=response.data;
          _this.showCrud=_this.crud.slice(0,_this.Page_Size);
          _this.Page_Total=_this.crud.length
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.showCrud = this.crud.slice((val - 1) * this.Page_Size, val * this.Page_Size);

    },
    search_do(){
      let select = this.Search_Select
      if(!select){
        this.warning()
      }
      if (this.Search_Input === "") {
        this.showCrud = this.crud.slice(0, this.Page_Size);
        this.Page_Total = this.crud.length
        this.currentChangePage(this.crud)
        return;
      }
//每次手动将数据置空,因为会出现多次点击搜索情况
      this.Shop_Data_End = []
      // eslint-disable-next-line no-unused-vars
      this.crud.forEach((value,index,array) => {
        let temp = ''

        if (select === 'enterprise_name') {
          temp = value.enterprise_name
        }
        if (select === 'enterprise_address') {
          temp = value.enterprise_address
        }
        if (select === 'industry') {
          temp = value.industry
        }
        console.log(this.Search_Input)
        if (temp!=='') {
          if (temp.indexOf(this.Search_Input)>=0) {
            this.Shop_Data_End.push(value)
          }
        }
      });
//页面数据改变重新统计数据数量和当前页
      this.currentPage = 1
      this.Page_Total = this.Shop_Data_End.length
//渲染表格,根据值
      this.currentChangePage(this.Shop_Data_End)
//页面初始化数据需要判断是否检索过
      this.Search_flag = true
    },
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.Page_Size;
      let to = this.currentPage * this.Page_Size;
      this.showCrud = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.showCrud.push(list[from]);
        }
      }
    },
    warning() {
      this.$message({
        message: '请选择搜索标签！',
        type: 'warning'
      });
    },

    //删除职位
    handleDeleteCom(index,row) {
      let _this=this
      _this.$confirm('此操作将永久删除该公司, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       axios.post('http://120.79.211.12:8080/Move_Enterprise_infor',row)
        _this.$router.go(0)
        _this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // //添加职位信息
    // handleAddCom(){
    //   this.com_form={}
    //   this.addDialogFormVisible=true
    // },
    // addHandleCom(formName,formData){
    //   let _this=this;
    //   axios.post('http://120.79.211.12:8080/Add_Enterprise_infor',formData)
    //     .then(function (response) {
    //       console.log(response);
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    //   console.log(formData)
    //   _this.addDialogFormVisible=false
    //   _this.$router.go(0)
    //
    // },

    //编辑职位信息
    cancelEdit(){
      this.editDialogFormVisible = false
    },

    handleEditCom(index,row){
      this.com_edit_form = []
      this.com_edit_form = JSON.parse(JSON.stringify(row))
      this.editDialogFormVisible = true
    },
    // eslint-disable-next-line no-unused-vars
    editHandleCom(formName,formData){
      let _this=this;
      console.log(_this.$refs[formName])
      _this.$refs[formName].validate((valid) => {
        if (valid) {
           axios.post('http://120.79.211.12:8080/Edit_Enterprise_infor',formData)
            // eslint-disable-next-line no-unused-vars
            .then(function (response) {

              for(let i=0;i<_this.showCrud.length;i++){
                if(_this.showCrud[i].enterprise_infor_id===formData.enterprise_infor_id){
                  _this.showCrud[i] = JSON.parse(JSON.stringify(formData))
                  console.log(11)
                }
              }
              console.log(formData);
            })
            .catch(function (error) {
              console.log(error);
            });
          this.editDialogFormVisible = false

        } else {
          ElMessage.error('请输入正确格式！')
          console.log('error submit!!');
          return false;
        }
      });
    },

    // //审核职位公司
    // handleExamineCom(index,row){
    //   this.com_form = []
    //   this.com_form = row
    //   this.examineDialogFormVisible = true
    // },
    // // eslint-disable-next-line no-unused-vars
    // examineHandleCom(formName,formData){
    //   let _this=this;
    //   console.log(_this.$refs[formName])
    //   _this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       axios.post('http://120.79.211.12:8080/Edit_Enterprise_infor',formData)
    //         // eslint-disable-next-line no-unused-vars
    //         .then(function (response) {
    //           console.log(formData);
    //         })
    //         .catch(function (error) {
    //           console.log(error);
    //         });
    //       this.examineDialogFormVisible = false
    //
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    // },



  },

  created(){
    this.findAll()
  },

}
</script>
<style>

.job-table-style{
  box-shadow:5px 5px 5px 5px #c1c1c1;
}


</style>
